<template>
  <div class="hm-login">
    <div>面经{{ buttonText }}</div>
    <div class="username">
        <span>
            <span class="tt">用户名：</span>
            <input class="uinput" type="text" v-model="username" placeholder="请输入用户名">
        </span>
    </div>
    <div class="password">
        <span>
            <span class="tt">密码：</span>
            <input class="uinput" type="password" v-model="password" placeholder="请输入密码">
        </span>
    </div>
    <div class="login-btn" @click="login">{{ buttonText }}</div>
    <div class="change" @click="changeL">{{ changeText }}</div> 
  </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'HmLogin',
    data() {
        return {
            username: 'STklm',
            password: 'stklmxx',
            isLogin: true,
            isRequesting: false
        }
    },
    computed: {
        buttonText(){
            return this.isLogin ? '登录' : '注册'
        },
        changeText(){
            return this.isLogin ? '注册账号' : '已有账号，去登录'
        }
    },
    methods:{
        changeL(){
            this.isLogin = !this.isLogin
        },
        login(){
            if(this.isLogin){
                // 登录
                this.postLogin()
            }else{
                // 注册
                this.postRegister()
            }
        },
        postLogin(){
            // 登录
            console.log('登录')
            if (this.Requesting) {
                alert('正在请求中，请稍后')
                return
            }
            if (!this.username.trim() || !this.password.trim()) {
                alert('请输入用户名或密码,用户名与密码不支持空格')
                return
            }
            this.Requesting = true
            // 发一个post请求，body参数为{username: this.username, password: this.password}
            axios.post('http://interview-api-t.itheima.net/h5/user/login', {
                username: this.username,
                password: this.password
            }).then(res => {
                console.log(res.data)
                this.Requesting = false
                if(res.data.code !== 10000){
                    alert('用户名或密码错误')
                    return
                }
                // 登录成功，跳转到首页
                this.$router.push({ 
                    path: '/index' ,
                    query: { username: this.username ,token: res.data.data.token }
                })
            })
            setTimeout(() => {
                this.Requesting = false
            }, 3000)
        },
        postRegister(){
            // 注册
            console.log('注册')
            if (this.Requesting) {
                alert('正在请求中，请稍后')
                return
            }
            if (!this.username.trim() || !this.password.trim()) {
                alert('请输入用户名或密码,用户名与密码不支持空格')
                return
            }
            //  http://interview-api-t.itheima.net/h5/user/register
            // this.Requesting = true
            axios.post('http://interview-api-t.itheima.net/h5/user/register', {
                username: this.username,
                password: this.password
            }).then((res) => {
                // 如果返回值code为200，则注册成功，切换为登录
                this.Requesting = false
                console.log(res.data.code)
                if (res.data.code === 10000) {
                    // this.$router.push({ 
                    //     path: '/index' ,
                    //     query: { username: this.username ,userid: res.data.data.id },
                    //     // 持久化存储，键为username，值为res.data.data.id
                    //     // localStorage.setItem('username', res.data.data.id)
                    // })
                    this.isLogin = true
                }
            })
            setTimeout(() => {
                this.Requesting = false
            }, 3000)
        }
    }
}
</script>

<style scoped lang="less">
.hm-login {
  div {
    width: 100%;
    margin-bottom: 10px; // 添加间距
  }
  .tt {
    width: 70px; // 设置宽度一致
    display: inline-block; // 确保内联块级元素
    text-align: right;
  }
  .uinput {
    //设置宽度为剩余宽度
    width: calc(100% - 70px);
    padding: 10px; // 增加内边距
    border: 1px solid #ccc; // 添加边框
    border-radius: 5px; // 圆角边框
    box-sizing: border-box; // 确保内边距和边框包含在宽度内
    &:focus {
      border-color: orange; // 聚焦时边框颜色变为橙色
      outline: none; // 去掉默认的聚焦边框
    }
  }
  .login-btn {
    background-color: orange; // 设置按钮底色为橙色
    text-align: center; // 按钮文字居中
    padding: 10px; // 添加内边距
    cursor: pointer; // 设置鼠标悬停效果
  }
  .change {
    text-align: right; // 文字靠右显示
    color: blue; // 设置文字颜色为蓝色
  }
}
</style>